var a = 100;
export default a;
var $ = {
    one: function (slt) {
        return document.querySelector(slt);
    },
    all: function (slt) {
        return document.querySelectorAll(slt);
    }
};
var Fangdajing = /** @class */ (function () {
    function Fangdajing() {
        this.lastSelectSmallLi = null; //上次选择的小图li
        this.drag = $.one(".drag");
        this.previewBox = $.one(".previewBox");
        this.pic = $.one(".pic");
        this.previewPic = $.one(".previewPic");
        this.picListBox = $.one(".picListBox");
        // 计算比例
        this.bili = {
            x: this.previewBox.offsetWidth / this.drag.offsetWidth,
            y: this.previewBox.offsetHeight / this.drag.offsetHeight
        };
        console.log(this.bili);
    }
    Fangdajing.ins = function () {
        if (!Fangdajing.me) {
            Fangdajing.me = new Fangdajing;
        }
        return Fangdajing.me;
    };
    Fangdajing.prototype.exec = function () {
        this.init();
        this.move();
        this.chg();
    };
    Fangdajing.prototype.init = function () {
        // 选择第一个图片
        var firstPic = this.picListBox.querySelector("img");
        this.select(firstPic);
        // 根据比例重置预览图片大小
        var width = this.pic.offsetWidth * this.bili.x;
        var height = this.pic.offsetHeight * this.bili.y;
        // console.log(width, height);
        this.previewPic.style.cssText = "width:" + width + "px; height:" + height + "px;";
    };
    // 预览框移动
    Fangdajing.prototype.previewMove = function (x, y) {
        // console.log(`{left:${x*this.bili}px; top:${y*this.bili}px;}`);
        this.previewPic.style.left = -x * this.bili.x + "px";
        this.previewPic.style.top = -y * this.bili.y + "px";
    };
    // 
    Fangdajing.prototype.chg = function () {
        var _this = this;
        this.picListBox.onclick = function (event) {
            var img = event.target;
            if (img.nodeName != "IMG")
                return;
            _this.select(img);
        };
    };
    // 选择图片
    Fangdajing.prototype.select = function (picSelect) {
        // 选中样式
        if (this.lastSelectSmallLi) {
            this.lastSelectSmallLi.classList.remove('active');
        }
        var li = picSelect.parentNode;
        li.classList.add("active");
        this.lastSelectSmallLi = li;
        // 切换 主图和预览图
        var src = picSelect.getAttribute("src");
        this.pic.src = src;
        this.previewPic.src = src;
    };
    // 移动：drag带动preview移动
    Fangdajing.prototype.move = function () {
        var _this = this;
        var imgBox = $.one(".picBox");
        // 移动
        imgBox.onmousemove = function (event) {
            // 1.取得鼠标位置
            var x = event.pageX - imgBox.parentElement.offsetLeft - _this.drag.offsetWidth / 2, y = event.pageY - imgBox.parentElement.offsetTop - _this.drag.offsetHeight / 2;
            // 2. 判断边界
            if (x < 0)
                x = 0;
            if (x > imgBox.offsetWidth - _this.drag.offsetWidth)
                x = imgBox.offsetWidth - _this.drag.offsetWidth;
            if (y < 0)
                y = 0;
            if (y > imgBox.offsetHeight - _this.drag.offsetHeight)
                y = imgBox.offsetHeight - _this.drag.offsetHeight;
            // 3. 设定选取块的位置
            _this.drag.style.left = x + "px";
            _this.drag.style.top = y + "px";
            // 4. 预览移动显示
            _this.previewMove(x, y);
        };
        // 鼠标进入
        imgBox.onmouseenter = function () {
            _this.drag.style.visibility = "visible";
            _this.previewBox.style.visibility = "visible";
        };
        // 鼠标移出
        imgBox.onmouseleave = function () {
            _this.drag.style.visibility = "hidden";
            _this.previewBox.style.visibility = "hidden";
        };
    };
    Fangdajing.me = null;
    return Fangdajing;
}());
Fangdajing.ins().exec();
